<template>
  <div>
    <div
      ref="line"
      style="width: 600px;height: 400px;"
    />
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
const line = ref(null)
const dismap = {
  blood_oxygen: '血氧',
  blood_sugar: '血糖',
  heart_rate: '心率',
  high_pressure: '高压',
  low_pressure: '低压',
}
const blood_oxygen = []
const blood_sugar = []
const heart_rate = []
const high_pressure = []
const low_pressure = []
const legend = ['血氧', '血糖', '心率', '高压', '低压']
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
onMounted(() => {

  var myChart = echarts.init(line.value)
  var option = {
    title: {
      text: '健康数据'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: legend
    },
    grid: {
      left: '6%',
      right: '6%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.data.y
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '血氧',
        type: 'line',
        stack: 'Total',
        data: props.data.blood_oxygen
      },
      {
        name: '血糖',
        type: 'line',
        stack: 'Total',
        data: props.data.blood_sugar
      },
      {
        name: '心率',
        type: 'line',
        stack: 'Total',
        data: props.data.heart_rate
      },
      {
        name: '高压',
        type: 'line',
        stack: 'Total',
        data: props.data.high_pressure
      },
      {
        name: '低压',
        type: 'line',
        stack: 'Total',
        data: props.data.low_pressure
      }
    ]
  }
  myChart.setOption(option)
})
</script>
